import "./zoom.css";
import { useState, useRef, useEffect } from "react";

function Zoom(props) {
  let { qw } = props;
  let {qh} = props;
  let box = useRef();
  let [currentImg, setCurrentImg] = useState(qw[0]);
  let [flag, setFlag] = useState(false);
  let [left, setLeft] = useState(0);
  let [top, setTop] = useState(0);
  let [l, setl] = useState(0);
  let [t, sett] = useState(0);

  function move(e) {
    // console.log(box.current);
    // console.log(e);
    var x = e.pageX;
    var y = e.pageY;
    var ot = box.current.offsetTop;
    var ol = box.current.offsetLeft;
    x -= ol;
    y -= ot;
    x = x < 130 ? 130 : x;
    x = x > 270 ? 270 : x;
    y = y < 130 ? 130 : y;
    y = y > 270 ? 270 : y;
    setl(x - 130);
    sett(y - 130);
    setLeft(-2 * l);
    setTop(-2 * t);
  }

  return (
    <div className="boxs">
      <div
        className="img_box"
        ref={box}
        onMouseMove={move}
        onMouseOver={() => {
          flag = true;
          setFlag(flag);
        }}
        onMouseOut={() => {
          flag = false;
          setFlag(flag);
        }}
      >
        {/* 当前展示的主图 */}
        <img src={currentImg||qw[0]} />
        {/* 右侧的放大图 */}
        {flag ? (
          <div className="big_img_box">
            <img
              src={currentImg||qw[0]}
              style={{ left: left + "px", top: top + "px" }}
              alt
            />
          </div>
        ) : (
          ""
        )}
        {/* 主图上的鼠标遮罩层 */}
        {flag ? (
          <div
            className="mark"
            style={{  left: l + 'px', top: t + 'px'}}
          ></div>
        ) : (
          ""
        )}
        {/* 底部五张小图 */}
        <div className="img_btns">
          {qw.map((item, i) => {
            if(i>0){
                return (
                
                    <img
                      className={{ active: item == currentImg }}
                      key={i}
                      src={item}
                      onClick={() => {
                        setCurrentImg(item);
                      }}
                    />
                  );
            }
           
          })}
        </div>
      </div>
      <div className="right">{qh.map((item,i)=>{
        return(
            <div className="er" key={i}>
                <h2 className="titles">{ item.title }</h2>
                <p className="supplier">{ item.supplier }</p>
                <p className="price">￥{ item.priceStr }</p>
                <button>添加到购物车</button>
            </div>
        )
      })}
        
      </div>
    </div>
  );
}

export default Zoom;

